<template>
    <el-row >
      <el-form style="width: 100%">
    <el-form-item>
      <el-table
        :data="questions"
        >
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
               <el-form-item>
                <span>{{ props.row.options && props.row.options[0] || "以上选项均不正确"}}</span>
              </el-form-item>
              <el-form-item>
                <span>{{ props.row.options && props.row.options[1] || "以上选项均不正确"}}</span>
              </el-form-item>
              <el-form-item>
                <span>{{ props.row.options && props.row.options[2] || "以上选项均不正确"}}</span>
              </el-form-item>
              <el-form-item>
                <span>{{ props.row.options && props.row.options[3]  || "以上选项均不正确"}}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
          label="题号"
          prop="number"
          width="60px">
        </el-table-column>
        <el-table-column
          label="内容"
          prop="content">
        </el-table-column>
        <el-table-column label="选择" width="260px">
          <template slot-scope="scope">
            <el-button type="info" size="mini" @click="choice(scope.row,'A')">A</el-button>
            <el-button type="info" size="mini" @click="choice(scope.row,'B')">B</el-button>
            <el-button type="info" size="mini" @click="choice(scope.row,'C')">C</el-button>
            <el-button type="info" size="mini" @click="choice(scope.row,'D')">D</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="80px">
          <template slot-scope="scope">
          <el-button type="danger" size="mini" @click="deleteRow(scope.row.number)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>
      </el-form>
  </el-row>
</template>

<script>
  export default {
    data() {
      return {
        questions: [],
        errorIds: [],
      };
    },
    created () {
      this.getData()
      
    },
    computed: {
    },
    methods: {
      getData(){
        this.getErrorIds()
        if(this.errorIds.size === 0){
          this.$message({
            message: '暂无错题',
            type: 'success'
          })
        } else {
          this.loadErrors()
        }
      },
      deleteRow(number){
        let set = new Set(this.errorIds)
        set.delete(number)
        window.localStorage.setItem('errorIds',JSON.stringify(set))
        if(set.size !== 0){
          this.getData()
        }else {
          this.questions = []
        }
        
      },
      choice(row,b){
        if(row.answer === b){
          this.$message({
            message: '答案正确',
            type: 'success',
            duration: 800
          })
        }else{
          this.$message({
            message: '正确答案是：'+row.answer,
              type: 'error',
              duration: 800
          })
        }
      },
      loadErrors(){
        let questions = JSON.parse(window.localStorage.getItem('questions')).filter(x => this.errorIds.has(x.number))
        this.questions = questions

      },
      getErrorIds(){
        let set = new Set()
        let oldSet = JSON.parse(window.localStorage.getItem('errorIds'))
        if(oldSet){
          set = new Set(oldSet)
        }
        this.errorIds = set
      }
    }
  }
</script>
